<template>
  <view class="orderDetail">
    <view class="bgRadius orderZhuang">
      <view class="zhuangHeader flex flex-align">
        <image src="@/static/shop/shop09.png" mode="scaleToFill" />
        <view class="flex flex-direction flex-bt">
          <view class="name">订单{{dataInfo.order_status==2||dataInfo.order_status==0?'待付款':dataInfo.order_status==4||dataInfo.order_status==3?'待发货':dataInfo.order_status==5?'待收货':dataInfo.order_status==1?'已完成':'退款售后'}}</view>
          <view class="miaoshu red flex flex-align" v-if="dataInfo.order_status==0||dataInfo.order_status==2">
            <view style="margin-top: -4rpx;">剩余支付时间</view>
            <uni-countdown color="#FE7431" :show-day="false" :show-hour="false" :hour="dataInfo.hour" :minute="dataInfo.minute" :second="dataInfo.second" />
          </view>
          <view class="miaoshu" v-if="dataInfo.order_status==3">您的订单等待配送中，请耐心等待哦～</view>
        </view>
      </view>
    </view>
    <view class="bgRadius orderZhuang" v-if="false">
      <view class="zhuangHeader flex flex-align">
        <image src="@/static/shop/shop08.png" mode="scaleToFill" />
        <view class="flex flex-direction flex-bt">
          <view class="name">爱便利航海路店</view>
          <view class="miaoshu">您的订单正在路上，请注意收货～</view>
        </view>
      </view>
      <view class="wuliu">
        <view class="flex flex-align flex-bt">
          <view class="left">顺丰快递 SF514616541</view>
          <view class="right flex flex-align">
            <view>详情</view>
            <uni-icons type="right" size="16" color="#323333"></uni-icons>
          </view>
        </view>
        <view class="info one-omit">您的订单已离开郑州二七分拣您的订单已离开郑州二七分拣中心，前往郑州中心，前往郑州</view>
      </view>
    </view>
    <view class="bgRadius addressInfo flex flex-bt flex-align" v-if="addressInfo.pickup_type==2">
      <view class="left">
        <view class="name flex flex-align"><uni-icons type="location" color="#FE7431" size="24" /> {{addressInfo.name}} {{addressInfo.phone}}</view>
        <view class="value">
          {{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.address}}
        </view>
      </view>
    </view>
    <view class="bgRadius zitiInfo" v-if="addressInfo.pickup_type==1">
      <view class="bgImg flex">
        <view class="left">
          <image :src="getImgUrl(addressInfo.image)"  mode="scaleToFill" />
        </view>
        <view class="right flex flex-direction flex-bt" style="width: 100%;">
          <view class="flex flex-align flex-bt title">
            <view class="name">{{addressInfo.user_store_name}}</view>
            <view class="km">距我{{getDistance(34.414525,131.525632,addressInfo.latitude||0,addressInfo.longitude||0)}}km</view>
          </view>
          <view class="address">
            {{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.address}}
          </view>
        </view>
      </view>
      <view class="zitiRen flex">
        <view class="flex-1">
          <view class="name">提货人</view>
          <view class="value">{{addressInfo.pickup_name}}</view>
        </view>
        <view class="flex-1">
          <view class="name">联系方式</view>
          <view class="value">{{addressInfo.pickup_phone}}</view>
        </view>
      </view>
    </view>
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>共1件商品</text></view>
      <view class="shopList">
        <view class="shopItem flex flex-bt">
          <view class="left flex">
            <image :src="getImgUrl(dataInfo.goods_image)"  mode="scaleToFill" />
            <view class="flex flex-direction flex-bt">
              <view class="name">{{dataInfo.goods_name}}</view>
              <view class="text">
                <view><text v-for="(item,index) in dataInfo.goods_specs" :key="index">{{ item }} <text v-if="index<(dataInfo.goods_specs.length-1)">,</text></text>  </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="price">
             <text v-if="goodTypeData?.kind==1">￥</text>{{dataInfo.goods_price}} <text v-if="goodTypeData?.kind!=1">{{goodTypeData?.name}}</text>
            </view>
            <view class="number">x{{dataInfo.goods_num}}</view>
          </view>
        </view>
      </view>
      <view class="quanBao flex flex-align flex-end" v-if="dataInfo.return_coupon" @click="openZeng">
        <view class="right flex flex-align">
          <view class="name">{{dataInfo.return_coupon[0].name}}...</view>
          <view class="value">
            <uni-icons type="right" size="16" color="#fff"></uni-icons>
          </view> 
        </view>
      </view>
      <view class="list">
        <view class="flex flex-align flex-bt" v-if="dataInfo.desc">
          <view class="name">订单备注</view>
          <view class="value flex flex-align flex-end">
           {{ dataInfo.desc }}
          </view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">商品总额</view>
          <view class="value">
            <text v-if="goodTypeData?.kind==1">￥</text>{{NP.times(Number(dataInfo.goods_price), Number(dataInfo.goods_num))}} <text style="font-size: 24rpx;" v-if="goodTypeData?.kind!=1">{{goodTypeData?.name}}</text>
          </view>
        </view>
        <view class="flex flex-align flex-bt" v-if="dataInfo.postage!=0">
          <view class="name">运费</view>
          <view class="value">{{dataInfo.postage==0?'包邮':'￥'+dataInfo.postage}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="dataInfo.payment&&couponData.length!=0">
          <view class="name">优惠券</view>
          <view class="value flex flex-align">
            <view>-¥{{couponNum}}</view>
          </view>
        </view>
        <!-- <view class="flex flex-align flex-bt" v-if="dataInfo.payment">
          <view class="name">虚拟币抵扣</view>
          <view class="value flex flex-align">
            <view>-¥10.00</view>
          </view>
        </view> -->
        <view class="flex flex-align flex-bt">
          <view class="name">总计</view>
          <view class="value red" v-if="goodTypeData?.kind==1">
            <text >￥</text>{{dataInfo.order_cash_amount}}
          </view>
          <view class="value red" v-if="goodTypeData?.kind!=1">
            <text v-if="dataInfo.order_cash_amount!=0">￥{{dataInfo.order_cash_amount}}+</text>{{dataInfo.order_amount}} <text style="font-size: 24rpx;">{{goodTypeData?.name}}</text>
          </view>
        </view>
        <view class="flex flex-align flex-end youhui" @click="openCoupon"  v-if="dataInfo.payment&&couponData.length!=0">
          <view class="name" v-if="dataInfo.order_status==9||dataInfo.order_status==8||dataInfo.order_status==7">退回优惠券￥{{countJian}}</view>
          <view class="name" v-else>已优惠{{countJian>NP.times(Number(dataInfo.goods_price), Number(dataInfo.goods_num))?NP.times(Number(dataInfo.goods_price), Number(dataInfo.goods_num)):countJian}}</view>
          <uni-icons type="right" size="16" color="#B3B5B7"></uni-icons>
        </view>
      </view>
    </view>
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>订单信息</text></view>
      <view class="list">
        <view class="flex flex-align flex-bt">
          <view class="name">订单编号</view>
          <view class="value">{{dataInfo.order_no}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.created">
          <view class="name">下单时间</view>
          <view class="value">{{timestampToDateTime(actiontime.created)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid">
          <view class="name">支付时间</view>
          <view class="value">{{timestampToDateTime(actiontime.paid)}}</view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">支付方式</view>
          <view class="value">{{goodTypeData?.name}}支付</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.shipping">
          <view class="name">发货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.shipping)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid_req_refund">
          <view class="name">申请退款时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.paid_req_refund)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.paid_refund">
          <view class="name">退款完成时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.paid_refund)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_req">
          <view class="name">申请退货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_req)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.pickuped">
          <view class="name">提货时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.pickuped)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.finished">
          <view class="name">订单完成时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.finished)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_send">
          <view class="name">退货到达时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_send)}}</view>
        </view>
        <view class="flex flex-align flex-bt" v-if="actiontime.returned_req_pass">
          <view class="name">退货审核时间</view>
          <view class="value flex flex-align">{{timestampToDateTime(actiontime.returned_req_pass)}}</view>
        </view>
      </view>
    </view>
    <view style="height: 120rpx;"></view>
    <!-- <view class="footer">
      <view class="flex flex-align flex-bt">
        <view class="left flex flex-align">
          <view class="name">合计:</view>
          <view class="value red">998 <text>礼品卡</text></view>
        </view>
        <view class="btn flex flex-align">
          <view class="yjmingxi">
            取消订单
          </view>
          <button class="submite">确认支付</button>
        </view>
      </view>
    </view> -->
    <view class="footer">
      <view class="flex flex-align flex-end tuikuan">
        <button class="submite button" @click="goOrderCancel" v-if="dataInfo.order_status==0||dataInfo.order_status==2">取消订单</button>
        <button class="button active" @click="goOrderSubmite" v-if="dataInfo.order_status==0||dataInfo.order_status==2">{{goodTypeData?.id==1?'立即支付':'确认兑换'}}</button>
        <button class="submite button" v-if="dataInfo.order_status==3" @click="goRefund">申请退款</button>
      </view>
    </view>
    <couponMx ref="couponMxRef"></couponMx>
    <giftdetail ref="giftdetailRef" v-if="dataInfo.return_coupon" :dataInfo="dataInfo.return_coupon"></giftdetail>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, unref, watch } from 'vue';
import NP from 'number-precision';
import couponMx from '@/components/couponMx.vue';
import { getTime, getTimeDifference, menuJump, toast,getDistance, getImgUrl,timestampToDateTime } from '@/utils/tools';
import { orderCancel, orderInfo, orderPay, orderRefundBefore } from '@/api/user';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter';
import { goodStorage } from '@/utils';
import giftdetail from '../shop/components/giftdetail.vue';
const couponMxRef = ref<InstanceType<typeof couponMx>>()
async function openCoupon(){
  couponMxRef.value?.open(couponData.value)
}
const orderStore = useAuthStore();
const giftdetailRef = ref<InstanceType<typeof giftdetail>>()
const goodTypeList = computed(() => orderStore.confige.currency); 
const goodTypeData = ref<
  | {
      id: number;
      name: string;
      kind: number
    }
  | undefined
>(undefined);
const dataInfo = ref<Recordable>({})
const addressInfo = ref<Recordable>({})
const couponData = ref<Recordable>([])
const actiontime = ref<Recordable>({})
const couponNum = ref(0)
const countJian = ref(0) 
const id = ref('')
watch(dataInfo, () => {
  if (dataInfo.value.goods_pay_currency_id) {
    goodTypeData.value = unref(goodTypeList).find((v: { id: any; }) => v.id === dataInfo.value.goods_pay_currency_id);
  }
}, { immediate: true });
onLoad((e:any)=>{
  id.value = e.id
})
onShow(()=>{
  couponNum.value = 0
  countJian.value = 0
  getDetail()
})
// 获取订单详情
function getDetail() {
  let parme = {
    id: id.value,
    with_address: 1,
    with_time:1
  }
  orderInfo(parme).then((res: any) => {
    dataInfo.value = res
    addressInfo.value = res.address
    dataInfo.value.hour = JSON.parse(getTimeDifference(res.survived_at)).hour
    dataInfo.value.minute = JSON.parse(getTimeDifference(res.survived_at)).minute
    dataInfo.value.second = JSON.parse(getTimeDifference(res.survived_at)).second
    if(res.action){
      actiontime.value = res.action
    }
    let cash = []
    if(res.payment){
      couponData.value = res.payment.filter((v: { kind: any; }) => v.kind === 'COUPON');
      cash = res.payment.filter((v: { kind: any; }) => v.kind === dataInfo.value.goods_pay_type);
      couponData.value.forEach((v: { amount_to_cash: any; }) => {
        couponNum.value += v.amount_to_cash
      })
      countJian.value = couponNum.value
    }
  })
}
function openZeng(){
  giftdetailRef.value?.open()
}
// 取消订单
function goOrderCancel(){
  orderCancel({order_id:id.value}).then((res:any)=>{
    uni.showToast({
      title: '取消成功',
      icon: 'none',
      duration: 1000
    })
    setTimeout(()=>{
      uni.navigateBack() 
    },1000)
  })
}
function goOrderSubmite(){
  let orderInfo = {
    order_id:Number(id.value),
    currency: [
      {
        currency_id: 1,
        have_id: 1,
        amount: dataInfo.value.order_cash_amount,
        amount_to_cash: dataInfo.value.order_cash_amount,
      }
    ],
  }
  orderInfo.currency = dataInfo.value.payment,
  orderPay(orderInfo).then((res:any)=>{
    uni.hideLoading()
    if(res.pay_success==1&&res.pay_data==''){
      uni.showToast({
        title: '支付成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/shop/paySuccess',
        })
      }, 1000);
    }else if(res.pay_success==1&&res.pay_data!=''){
      onBridgeReady(JSON.parse(res.pay_data))
    }
  })
}
// 退款
function goRefund(){
  dataInfo.value.goodTypeData = goodTypeData.value
  goodStorage.set('routerInfo', dataInfo.value)
  menuJump({is_tab:false,link:'/pages/orderList/refund',link_type:1})
}
const onBridgeReady = (payResponse: any) => {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    {
      appId: payResponse.appId,
      timeStamp: payResponse.timeStamp,
      nonceStr: payResponse.nonceStr,
      package: payResponse.package,
      signType: payResponse.signType,
      paySign: payResponse.paySign,
    },
    (res: any) => {
      if (res.err_msg === 'get_brand_wcpay_request:ok') {
        // 支付成功
        setTimeout(() => {
            uni.redirectTo({
              url: '/pages/shop/paySuccess?id='+goodTypeData.value?.id,
            })
          }, 1000);
      } else {
        // 支付失败
        
      }
    },
  );
};
</script>

<style scoped lang="scss">
.orderDetail{padding: 26rpx;
  .orderZhuang{padding:30rpx;
    .zhuangHeader{margin-bottom: 20rpx;
      image{width: 80rpx;height: 80rpx;margin-right: 10rpx;
    }
      .name{font-size: 30rpx;font-weight: 600;  }
      .miaoshu{font-size: 24rpx;color: #999999;margin-top: 10rpx;}
      .miaoshu.red{color: #FE7431;font-weight: bold;}
    }
    .wuliu{font-size: 24rpx;color: #323333;padding: 30rpx 20rpx;border-radius: 20rpx;
      background: #F5F6F7;
      .left{margin-right: 20rpx;color: #969799;}
      .right{color: #FE7431;}
      .info{margin-top: 20rpx;font-weight: bold;font-size: 28rpx;}
    }
  }
  .addressInfo{padding-top: 30rpx;
    .left{
      .name{font-size: 28rpx;color: #323232;font-weight: bold;
        
      }
      .value{font-size: 26rpx;color: #969799;margin-top: 16rpx;padding-left: 10rpx;}
    }
  .right{
    .uni-icons{color: #969799;}
    }
  }
  .shopInfo{
    .list{
      .youhui{
       .name{font-size: 24rpx;color: #B3B5B7;}
      }
      .flex{padding: 6rpx 0;
        .name{font-size: 28rpx;color: #969799;}
        .value{font-size: 28rpx;color: #333;font-weight: bold;
          input{border: none;outline: none;font-size: 28rpx;color: #333;text-align: right;width: 500rpx;}
        }
        .red{
          color: #FE4927;
        }
      }
    }
    .quanBao{background:url('@/static/shop/shop05.png');border-radius: 50rpx;color: #fff;padding-left: 20rpx;margin:20rpx 0;
    background-size: 100% 100%;
    .flex{padding: 14rpx 10rpx 14rpx 0;
      .name{font-size: 24rpx;color: #fff;}
      .value{font-size: 24rpx;color: #FE7431;}
      }
    }
  }
  .shopList{
    .shopItem{padding: 20rpx 0;
      .left{
        image{width: 170rpx;height: 170rpx;}
        .flex-direction{margin-left: 20rpx;
          .name{font-size: 28rpx;color: #333;width: 320rpx;font-weight: bold;}
          .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
          view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
          }
        }
      }
    .right{text-align: right;font-weight: bold;
      .price{font-size: 32rpx;color: #323233;
        text{font-size: 24rpx;}
      }
      .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
    }
    }
  }
}
.zitiInfo{padding: 0;
  .bgImg{background: url('@/static/shop/shop03.png') no-repeat;background-size: 100%;padding: 20rpx;
    .left{
      image{
        width: 144rpx;margin-right: 20rpx;height: 144rpx;
      }
    }
    .right{
      .title{font-weight: bold;
        .name{font-size: 30rpx;color: #333;}
        .km{font-size: 24rpx;color: #FE7431;}
      }
      .address{font-size: 24rpx;color: #969799;}
    }
  }
  .zitiRen{padding: 30rpx 0;
   .flex-1{text-align: center;
     .name{font-size: 24rpx;color: #969799;}
     .value{font-size: 28rpx;color: #333;font-weight: bold;margin-top: 6rpx;}
   }
   .flex-1:last-child{
    border-left: 1px solid #ECECEC;
   }
  }
}
.zhifuType{
  .list{
    .flex{
      .left{
        .Img{width: 80rpx;height: 80rpx;}
        .value{font-size: 28rpx;color: #333;font-weight: bold;margin-left: 10rpx;}
      }
    }
  }
}
.footer{background: #fff;position: fixed;bottom:0;left:0;width: 100%;padding:20rpx 20rpx 40rpx;z-index: 11;
  box-sizing: border-box;
  .flex{
    .name{font-size: 28rpx;color: #969799;margin-right: 10rpx;}
    .value{font-size: 36rpx;color: #333;
      font-weight: bold;
      text{font-size: 24rpx;}
    }
    .red{color: #FE4927;}
  }
 .btn{
  .yjmingxi{width: 250rpx;text-align: right;padding-right: 20rpx;
   .name{font-size: 24rpx;color: #969799;}
    .flex{margin-top: 6rpx;font-size:22rpx;font-weight: bold;
      .redPrice{font-size: 24rpx;color: #FE4927;} 
    }
  }
   button{background: #FE7431;border-radius: 40rpx;color: #fff;font-size: 24rpx;padding: 6rpx 50rpx;}
  }
  .tuikuan{
    button{background: #F5F6F7;border-radius: 40rpx;color: #646566;padding: 6rpx 50rpx;}
    .active{background: #FE7431;border-radius: 40rpx;color: #fff;margin-left: 20rpx;}
  }
}
</style>